<template>
  <div class="home">
    <!-- title -->
    <ConTitle :info="info"></ConTitle>
    <!-- 第二行 -->
    <div class="linetwo">
      <GaiLan class="lineleft"></GaiLan>
      <GongGao class="card-right"></GongGao>
    </div>
    <!-- 第三行 -->
    <div class="linethree">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>空气湿度</span>
        </div>
        <div ref="chart1" class="chart">放图表信息</div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>光照</span>
        </div>
        <div ref="chart2" class="chart">放图表信息</div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>气压</span>
        </div>
        <div ref="chart3" class="chart">放图表信息</div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>土壤湿度</span>
        </div>
        <div ref="chart4" class="chart">放图表信息</div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入 api
import { $deviceCount, $senserCount } from "@/api";
import GaiLan from "./components/GaiLan.vue";
import GongGao from "./components/GongGao.vue";
import ConTitle from "@/components/ConTitle";
export default {
  name: "dashboardView",
  data() {
    return {
      // 对象的数据，是异步获取的，在第一次渲染页面时，有可能数据还没获取到,属性是undefined ,给undefined找下一级的属性就会报错了
      deviceObj: {
        LoRaWAN: "",
        LoRaPP: "",
        group: "",
        sensor: "",
      },
      info: {
        path: "",
        text: "仪表盘",
        msg: " - 设备概览和传感数据可视化",
      },
    };
  },
  async mounted() {
    var res = await $deviceCount();
    var res1 = await $senserCount();
    console.log(res1);
    this.deviceObj = res.data.data;

    // 调用 图表
    this.draw(res1.data.data);
  },
  components: { GaiLan, GongGao, ConTitle },
  methods: {
    draw(data) {
      console.log(data);
      // 在vue项目中 使用 ref获取到真实dom节点，话echarts的图表，不容易报错
      var option1 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.air,
            type: "line",
            smooth: true,
          },
        ],
      };
      this.drawFun(this.$refs.chart1, option1);
      //2.第二个图表
      var option2 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.beam,
            type: "bar",
          },
        ],
      };
      this.drawFun(this.$refs.chart2, option2);
      //3.第三个图表
      var option3 = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [25, 150],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: data.pressure,
          },
        ],
      };
      this.drawFun(this.$refs.chart3, option3);
      //4.第四个图表
      var option4 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.soil,
            type: "line",
            smooth: true,
          },
        ],
      };
      this.drawFun(this.$refs.chart4, option4);
    },
    drawFun(myRef, option) {
      var myChart = this.$echarts.init(myRef);
      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding: 10px;

  .linetwo {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .lineleft {
      width: 70%;
      display: flex;
      justify-content: space-between;
      margin-right: 10px;
    }
    .card-right {
      display: flex;
      width: 30%;
    }
    .box-card {
      height: 300px;
    }
  }

  .linethree {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .box-card {
      width: 49%;
      margin-bottom: 10px;
      .chart {
        width: 100%;
        height: 400px;
        border: 1px solid red;
      }
    }
  }
}
</style>